import Taro, { Component } from '@tarojs/taro'
import PropTypes from 'prop-types'
import { View, Image } from '@tarojs/components'

import './index.scss'

/**
 * 单行提示
 * @param text
 * @param size
 * @param width
 * @param img
 * @param color
 * @param cls
 * @param onClick
 */
class RowTip extends Component {

	static propTypes = {
		text: PropTypes.string,
		width: PropTypes.oneOfType([
			PropTypes.string,
			PropTypes.number
		]),
		size: PropTypes.oneOfType([
			PropTypes.string,
			PropTypes.number
		]),
		img: PropTypes.oneOfType([
			PropTypes.string,
			PropTypes.object
		]),
		color: PropTypes.string,
		cls: PropTypes.string,					
		onClick: PropTypes.func,
	}

	static defaultProps = {
		text: '注：填写单件最大体积的长、宽、高',
		width: 'auto',
		color: '#AEAAAA',
		size: 8,
		cls: '',
	}
	render(){
		const { text, color, img, width, size, cls } = this.props
		return(
			<View className={`row-tips-content ${cls || ''}`} style={{fontSize: size, color: color, width: width }} onClick={this.clickRowTip}>
				{img && <Image className='row-tips-content-img' src={img} />}
				<View>{text}</View>
			</View>
		)
	}

	clickRowTip = () => {
		const { onClick } = this.props
		onClick && onClick()
	}
}

export default RowTip